<template>
    <div class="container">
        <div style="margin-bottom:.5rem;">猜你喜欢</div>
        <div class="item" v-for="item of this.itemListRecommend" :key="item.index">
            <img :src="item.src" alt="">
            <div class="text"> 
                <p class="title">{{item.title}}</p>
                <p class="comment">{{item.comment}}</p>
                 <div class="priceAndArea">
                     <span class="price">
                         <span class="rmb">¥</span>
                         <span class="num">{{item.price}}</span> 
                    起</span> 
                     <span class="area">{{item.area}}</span>
                 </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"HomeRecommend",

    data(){
        return {
            
        }
    },
    methods:{

    },
    props:{
        itemListRecommend:Array
    }
}
</script>

<style scoped lang="stylus">
      .container{
          padding:.2rem;
          .item{
              width :100%;
              height :2.5rem;
              position: relative;
              margin-bottom :.5rem;
              span{
                  margin :0;
              }
              .text{
                  position :absolute;
                  top:0;
                  left :3rem;
                  .title{
                      top:.2rem;
                      position :absolute;
                  }
                  .comment{
                      top:1rem;
                      position :absolute;  
                      color: #616161;
                      font-size: .24rem;
                      line-height: .34rem;
                      vertical-align: text-bottom;
                  }
                  .priceAndArea{
                      top:1.8rem;
                      position: relative;
                      .rmb{
                          color :#ff8300;
                      }
                      .num{
                          color :#ff8300;
                          font-size :.4rem;
                      }
                      .area{
                          
                      }
                  }
              }
              img{
                  width :2.5rem;
                  height :2.5rem;
                  display :inline-block;
              }
          }
      }
</style>

